<form class="layui-form" action="">
    <input name="euId" id="euId1" type="hidden" />
    <input name="euRoleIds" id="euRoleIds1" type="hidden" />

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">真实姓名:</label>
            <div class="layui-input-inline">
                <input type="text" name="euName" id="euName1" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">登录账号:</label>
            <div class="layui-input-inline">
                <input type="text" name="euLogin" id="euLogin1" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">登录密码:</label>
            <div class="layui-input-inline">
                <input type="text" name="euPwd" id="euPwd1" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">是否锁定:</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" name="euLocked" id="euLocked1" lay-skin="switch" lay-filter="switchTest" lay-text="启用|锁定">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户角色:</label>
            <div class="layui-input-block" id="euRoleName1">
            </div>
        </div>
    </div>

</form>

<script>
    $(function(){
        var data = $('#page-com').data('userDataInfo');
        var rList = $('#roleTemp').data('roleList');
        if (rList != null){
            let rSelect = '';
            for(let i = 0; i < rList.length; i++){
                rSelect += ("<input type='checkbox' value='"+rList[i].id+"' title='"+rList[i].name+"'>");
            }
            $("#euRoleName1").html(rSelect);
        }

        if (data != null){
            document.getElementById("euId1").value= data.id;
            document.getElementById("euName1").value= data.userName;
            document.getElementById("euLogin1").value= data.loginName;
            //document.getElementById("euPwd1").value= data.password;
            if (data.locked === 0){
                $('#euLocked1').attr('checked', true);
            }else {
                $('#euLocked1').attr('checked', false);
            }

            document.getElementById("euRoleIds1").value= data.roleIds;
            let ids = data.roleIds.split(',');
            for (let i = 0; i < ids.length; i++) {
                $("#euRoleName1 input[value='" + ids[i] + "']").attr("checked", "checked");
            }

            $('#page-com').data('userDataInfo',null);
        }


        layui.use('form', function(){
            var form = layui.form;
            //form.render('radio');
            form.render('checkbox');
        });
    })


    $(document.body).on('click', '#euRoleName1', function () {
        let roleIds = '';

        $('#euRoleName1').find('input').each(function (i) {
            if ($(this).prop('checked')) {
                if (roleIds === ''){
                    roleIds += $(this).val();
                }else {
                    roleIds += ','+$(this).val();
                }
            }
        });


        document.getElementById("euRoleIds1").value= roleIds;
    });



</script>